LOLMatrix.index = (function () {
    return {
        hdp: function () {
            var hdpItem = $(".hdp-item");
            if (hdpItem.length > 1) {
                //Set as background
                $.each(hdpItem, function (i, o) {
                    var temp = $(o),
                        bgImg = $(".bg-img", temp);;
                    temp.css({ "background": 'url(' + bgImg.attr("src") + ') top center no-repeat' });
                    bgImg.remove();
                });

                $('.hdp').slick({
                    arrows: false,
                    autoplay: true,
                    autoplaySpeed: 4000,
                    pauseOnHover: false,
                    infinite: true,
                    speed: 600,
                    cssEase: 'ease-out',
                    dots: true,
                    accessibility: false,
                    draggable: false
                });
            }

        },

        //Upcoming
        sporting: function () {
            var upcoming=$("#Upcoming");
            if ($(".sporting-item",upcoming).length > 4) {
                $('.p-m-c',upcoming).slick({
                    slidesToShow: 4,
                    slidesToScroll: 1,
                    accessibility: false,
                    draggable: false,
                    respondTo: "min"
                });
            }
        },

        //Tournaments
        matchType: function () {
            if ($(".type-item").length > 5) {
                $('.match-type .p-m-c').slick({
                    slidesToShow: 5,
                    slidesToScroll: 1,
                    accessibility: false,
                    draggable: false
                });
            }

        },


        newsHdp: function () {
            if ($(".news-item-box").length > 1) {
                $('.news-hdp').slick({
                    arrows: false,
                    autoplay: true,
                    autoplaySpeed: 4000,
                    infinite: true,
                    speed: 500,
                    cssEase: 'linear',
                    fade: true,
                    dots: true,
                    accessibility: false,
                    draggable: false
                });
            }

        },

        //add scroll
        integralScroll: function () {
            $(".integral .p-m-c").mCustomScrollbar();
        },

        //Results
        result: function () {
            if ($(".result .sporting-item").length > 4) {
                $('.result .p-m-c').slick({
                    slidesToShow: 4,
                    slidesToScroll: 1,
                    accessibility: false,
                    draggable: false,
                    respondTo: "min"
                });
            }
        },



        matchSchedule: function () {
            $('#showVideo span.date').each(function(index, element) {
                var element$ = $(element);
                element$.text(LOLMatrix.common.formatLeftTime(element$.data('date')));
            });
            $('#matchResultVideo span.date').each(function(index, element) {
                var element$ = $(element);
                var localTimeString = moment.utc(element$.data('date')).local().format('YYYY-MM-DD');
                element$.text(localTimeString);
            });
        },

        //echart3
        chat:function(){
            var option = {
                tooltip : {
                    trigger: 'axis',
                    backgroundColor:'rgba(0,0,0,.9)',
                    axisPointer: { lineStyle: { color: '#fff' }},
                    textStyle : {  color: '#6ed4ff'},
                    formatter: "{c}"
                },
                grid: { left: '16%',top:'10%', right: '6%', bottom: '14%', containLabel: false},
                xAxis : [
                    {
                        type : 'category',
                        axisLine: { lineStyle: { color: '#1b4361', width: 2 },onZero: false },
                        splitLine: {
                            lineStyle: { color: '#225981' },
                            interval:function(index,value){
                                if(index<8){
                                    return true;
                                }else{
                                    return false;
                                }
                            }
                        },
                        axisTick: { show: false },
                        axisLabel : {
                            formatter:  function(value,idx){return '0'+(++idx)},
                            textStyle: { color: '#ffffff' }
                        },
                        data:function () {
                            var list = [];
                            for (var i = 1; i <= 8; i++) {
                                var str = '0'+i;
                                list.push(str);
                            }
                            return list;
                        }()
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLine : {lineStyle: { color: '#1b4361', width: 2 }},
                        splitLine: {  lineStyle: { color: '#02807c', type: 'dotted' }}, //dotted,dashed
                        axisTick: { show: false },
                        axisLabel: {
                            formatter: function (value) {
                                if (value > 10000) {
                                    return parseInt(value / 1000) + " k ";
                                } else {
                                    return value;
                                }

                            },
                            textStyle: { color: '#ffffff' }
                        },
                        //interval: 7,

                        scale:true

                    }
                ],
                series : [
                    {
                        type:'line',
                        smooth:true,
                        itemStyle: {  normal: {color: '#ffffff',borderWidth:4}},
                        lineStyle : {  normal: { color: '#7ed2f5'}},
                        data:[]
                    }
                ]
            };

            //get data
            function getData(li) {
                var data = $.trim(li.attr("data-integral")), numArr = [];
                if (data) {
                    data = data.split(",");
                    $.each(data, function (index, item) {
                        numArr.push(item * 1);
                    });
                }
                return numArr;
            }

            //set opts data
            function setOptsData(li, opts) {
                //series data
                opts.series[0].data = getData(li);
                return opts;
            }

            //update chat header content
            function updateChatHeader(header,li) {
                var avatar = $("img", header),
                    avatarLink=$("a",header),
                    name = $(".name", header),
                    price = $(".price p", header),
                    priceChange = $(".price-change p", header),
                    pricePercent = $(".price-percent p", header);

                var data = getData(li),
                    len=data.length;


                avatar.attr("src", $("img", li).attr("src"));
                avatarLink.attr("href", $("img", li).attr("data-link"));
                name.html($(".name", li).html());



                //price
                var priceVal = data[len - 1];
                if (priceVal / 1000 > 10) {
                    price.html(parseInt(priceVal * 1 / 1000) + "k");
                } else {
                    price.html(priceVal);
                }

                //price change and price change percent;
                var changeVal = data[len - 1] - data[0];
                var percentVal = (changeVal / priceVal).toFixed(2);
                var cls = { up: 'price-up', down: "price-down" };

                if (changeVal > 0) {
                    if (priceVal / 1000 > 10) {
                        priceChange.addClass(cls.up).removeClass(cls.down).html(parseInt(changeVal / 1000) + "k");
                    } else {
                        priceChange.addClass(cls.up).removeClass(cls.down).html(changeVal);
                    }
                    pricePercent.addClass(cls.up).removeClass(cls.down).html(percentVal + "%");

                } else {
                    if (priceVal / 1000 > 10) {
                        priceChange.addClass(cls.down).removeClass(cls.up).html(parseInt(changeVal / 1000) * -1 + "k");
                    } else {
                        priceChange.addClass(cls.down).removeClass(cls.up).html(changeVal * -1);
                    }
                    pricePercent.addClass(cls.down).removeClass(cls.up).html(percentVal * -1 + "%");
                }
            }


            //set li cur class，and column up/down class
            function setCur(list) {
                var lis = null, cols = null, curCol = null,diff=0;
                var cls = { up: 'up', down: 'down' };
                $.each(list, function (index, item) {
                    lis = item.lis;
                    //set cur
                    lis.eq(0).addClass("cur");


                    //set up/down
                    lis.each(function (i, o) {
                        cols = $(".col", $(o));
                        cols.each(function (k, n) {
                            curCol = $(n);
                            diff = $.trim(curCol.attr("data-diff"))*1;
                         //   console.log(i,diff);

                            if (diff > 0) {
                                curCol.addClass(cls.up);
                            } else if(diff<0) {
                                curCol.addClass(cls.down);
                            } if(diff===0) {
                                $("i",curCol).html('-');
                            }

                        });

                    });

                })
            };


            //show chat and update chat header content
            function showChat(chat,curLi,opts,chatHeader) {
                chat.setOption(setOptsData(curLi, opts));
                updateChatHeader(chatHeader, curLi);
            };





            //player===============================================
            var playersList = [
                { box: $("#goodPlayer"), lis: $("li:not('.title-row')", $("#goodPlayer"))},
                { box: $("#badPlayer"), lis: $("li:not('.title-row')", $("#badPlayer")) }
            ];
            var pChatHeader = $("#playerChatHeader");
            setCur(playersList);



            //first load
            var curIndex = 0,
                curLi = playersList[curIndex].lis.filter(".cur");
            var pChart = echarts.init(document.getElementById('playerChat')),
                pOpts = $.extend(true, {}, option);
            showChat(pChart, curLi, pOpts, pChatHeader)


            //tabs switch
            var tabLis = $("#playerTab li");
            tabLis.on("changetab", function () {
                curIndex = tabLis.index($(this));
                curLi = playersList[curIndex].lis.filter(".cur");
                showChat(pChart, curLi, pOpts, pChatHeader);
            });

            //click li
            $.each(playersList, function (index, item) {
                item.lis.on("click", function () {
                    curLi = $(this);
                    curLi.addClass("cur").siblings().removeClass("cur");
                    showChat(pChart, curLi, pOpts, pChatHeader);
                });
            })



            //teams===============================================
            var teamsList = [
                { box: $("#goodTeam"), lis: $("li:not('.title-row')", $("#goodTeam")) },
                { box: $("#badTeam"), lis: $("li:not('.title-row')", $("#badTeam")) }
            ];
            var tChatHeader = $("#teamChatHeader");
            setCur(teamsList);

            //first load
            var curIndex2 = 0,
                curLi2 = teamsList[curIndex2].lis.filter(".cur");
            var tChart = echarts.init(document.getElementById('teamChat')),
                tOpts = $.extend(true, {}, option);
            showChat(tChart, curLi2, tOpts, tChatHeader);

            //tabs switch
            var tabLis2 = $("#teamTab li");
            tabLis2.on("changetab", function () {
                curIndex2 = tabLis2.index($(this));
                curLi2 = teamsList[curIndex2].lis.filter(".cur");
                showChat(tChart, curLi2, tOpts, tChatHeader);
            });

            //click li
            $.each(teamsList, function (index, item) {
                item.lis.on("click", function () {
                    curLi2 = $(this);
                    curLi2.addClass("cur").siblings().removeClass("cur");
                    showChat(tChart, curLi2, tOpts, tChatHeader);
                });
            });



        }
    }
})();

$(function () {
    var index = LOLMatrix.index;
    index.hdp();
    index.sporting();
    index.result();
    index.matchType();
    index.newsHdp();

    index.integralScroll();
    index.matchSchedule();
    index.chat();

/*    $('.match-video-box').on('click', '.link-box3', function (e) {
        e.preventDefault();
        LOLMatrix.common.dialog.openDialog({ url: $(this).attr('href') });
    });*/


    //弹窗======================================

    //赛事进程
    $(".sporting-item a", $("#Upcoming")).bind("click", function (e) {
        e.preventDefault();
        // $(".p-win").not('div.video-win').fadeOut();
        // LOLMatrix.common.dialog.openDialog({ url: $(this).attr('href') });
    });

    //比赛结果
    $(".sporting-item a", $(".result")).bind("click", function (e) {
        e.preventDefault();
        // $(".p-win").not('div.video-win').fadeOut();
        // LOLMatrix.common.dialog.openDialog({ url: $(this).attr('href') });
    });

    //比赛重播
    $(".video-item a", $(".match-video")).bind("click", function (e) {
        e.preventDefault();
        $(".p-win").not('div.video-win').fadeOut();
        LOLMatrix.common.dialog.openDialog({ url: $(this).attr('href') });
    });





});
